<template>
  <EditDropDown dropdownTitle="基础信息">
    <template v-slot:content>
      <px-form ref="baseInfoFormRef" :inline="true" :model="baseInfoFormValue" :rules="baseInfoRules" label-position="right" label-width="120px">
        <px-row>
          <px-col :span="8">
            <px-form-item label="模板编号" prop="temCode">
              <px-input v-model="baseInfoFormValue.temCode" placeholder="请输入模板编号" maxlength="50" clearable disabled />
            </px-form-item>
          </px-col>
          <px-col :span="8">
            <px-form-item label="模板名称" prop="temName">
              <px-input v-model="baseInfoFormValue.temName" placeholder="请输入模板名称" maxlength="50" clearable />
            </px-form-item>
          </px-col>
          <px-col :span="8">
            <EquipClassSelect :isRequired="true" :className="baseInfoFormValue.className" @changeClassName="changeClassName" />
          </px-col>
          <px-col :span="8">
            <px-form-item label="巡检内容" prop="inspectContentType">
              <px-radio-group v-model="baseInfoFormValue.inspectContentType">
                <px-radio v-for="item in checkTargetList" :key="item.value" :label="item.value">{{ item.label }}</px-radio>
              </px-radio-group>
            </px-form-item>
          </px-col>
          <px-col v-show="baseInfoFormValue.inspectContentType === 1" :span="8">
            <EquipSystemTree
              :className="baseInfoFormValue.className"
              :systemCode="baseInfoFormValue.systemCode"
              currentType="edit"
              @changeAllSystemCodes="changeAllSystemCodes"
              @changeSystemCodes="changeSystemCodes"
              @clearSystem="clearSystem"
              @getEditSystemCodes="getEditSystemCodes"
            />
          </px-col>
          <px-col v-show="baseInfoFormValue.inspectContentType === 1" :span="8">
            <EquipCategorySelect
              :className="baseInfoFormValue.className"
              :systemCodes="systemCodes"
              :categoryId="baseInfoFormValue.categoryId"
              @changeCategory="changeCategory"
            />
          </px-col>
          <px-col v-show="baseInfoFormValue.inspectContentType === 1" :span="8">
            <EquipTypeSelect
              :className="baseInfoFormValue.className"
              :systemCodes="systemCodes"
              :categoryId="baseInfoFormValue.categoryId"
              :typeId="baseInfoFormValue.typeId"
              @changeType="changeType"
            />
          </px-col>
          <px-col v-if="baseInfoFormValue.inspectContentType === 2" :span="8">
            <px-form-item label="巡检区域" prop="inspectArea" :rules="[{ required: true, message: '巡检区域不能为空', trigger: 'change' }]">
              <px-cascader
                ref="cascaderRef"
                v-model="baseInfoFormValue.inspectArea"
                filterable
                clearable
                collapse-tags
                collapse-tags-tooltip
                style="width: 100%"
                :options="positionCodesList"
                :props="cascaderProps"
                placeholder="请选择巡检区域"
                @focus="focusPositionCodes"
                @change="changeCheckArea"
              />
            </px-form-item>
          </px-col>
          <px-col :span="24">
            <px-form-item label="备注" prop="remark">
              <px-input v-model="baseInfoFormValue.remark" :rows="3" type="textarea" placeholder="请输入备注" maxlength="1000" clearable />
            </px-form-item>
          </px-col>
        </px-row>
      </px-form>
    </template>
  </EditDropDown>
</template>
<script setup lang="ts">
import { reactive, toRefs, computed, ref, onMounted, watchEffect, watch } from "vue";

import EquipClassSelect from "@/views/all/equip/components/EquipClassSelect.vue";
import EquipSystemTree from "@/views/all/equip/components/EquipSystemTree.vue";
import EquipCategorySelect from "@/views/all/equip/components/EquipCategorySelect.vue";
import EquipTypeSelect from "@/views/all/equip/components/EquipTypeSelect.vue";
import EditDropDown from "@/views/all/equip/components/EditDropDown.vue";
import { getTableData } from "@/api/system/positionManage";
import { getEquipNameSelect } from "@/api/equip/archive";
import { cloneDeep } from "@pureadmin/utils";
import { INSPECT_CONTENT } from "../../config";

const baseInfo = defineModel("baseInfo");
const emits = defineEmits(["clearEquip"]);

const cascaderRef = ref();
const cascaderProps = {
  children: "children",
  label: "name",
  value: "id",
  checkStrictly: false,
  multiple: true,
  emitPath: false
};

// 页面本身的值
const state = reactive<any>({
  activeStep: 0, // 激活的步骤，默认步骤1
  // 第1步：基础信息
  baseInfoFormRef: null, // 基础信息ref
  baseInfoFormValue: {
    temCode: "",
    temName: "",
    className: "",
    systemCode: "",
    inspectContentType: 1,
    inspectArea: "",
    remark: "",
    categoryId: null,
    typeId: null
  }, // 基础信息form表单
  checkTargetList: INSPECT_CONTENT, // 基础信息巡检内容列表
  positionCodesList: [], // 基础信息巡检区域列表
  equipTableData: [], // 基础信息巡检设备列表
  systemCodes: [], //基础信息选件设备弹窗-查询条件
  categoryList: [], // 设备总称下拉框
  typeIdList: [] // 设备类型下拉框
});
const { baseInfoFormRef, baseInfoFormValue, checkTargetList, positionCodesList, systemCodes, typeIdList, categoryList } = toRefs(state);

// !!!defaultData和temCode二选一，不要都传值
const props = defineProps(["defaultData", "temCode"]);
// 编辑、复制设置默认值
watch(
  () => props.defaultData,
  () => {
    if (props.defaultData) {
      baseInfoFormValue.value = props.defaultData;
      if (props.defaultData.typeId) {
        typeIdList.value = [{ label: props.defaultData.typeDesc, value: props.defaultData.typeId }];
      }
      focusPositionCodes();
    }
  }
);
watch(
  () => props.temCode,
  () => {
    if (props.temCode) {
      baseInfoFormValue.value.temCode = props.temCode;
    }
  }
);
defineExpose({
  form: baseInfoFormRef
});
watchEffect(() => {
  const { inspectContentType, systemCode, categoryId, typeId, typeIdinspectArea, ...others } = baseInfoFormValue.value;
  if (inspectContentType === 1) {
    baseInfo.value = cloneDeep({ inspectContentType, systemCode, categoryId, typeId, systemCodes, ...others });
  } else {
    baseInfo.value = cloneDeep({ inspectContentType, typeIdinspectArea, ...others });
  }
});
onMounted(() => {
  queryClassNameSelect();
});
// 搜索项目下拉框
const queryClassNameSelect = async () => {
  categoryList.value = await getEquipNameSelect({ systemCode: baseInfoFormValue.value.systemCode });
};
// 表单校验规则-基础信息
const baseInfoRules = computed(() => ({
  temCode: [{ required: true, message: "模板编号不能为空", trigger: "blur" }],
  temName: [{ required: true, message: "模板名称不能为空", trigger: "blur" }],
  inspectContentType: [{ required: true, message: "巡检内容不能为空", trigger: "blur" }]
}));

// 外部封装好的组件
// 科室组件调用父组件
const changeClassName = (val, isOnlyClass) => {
  baseInfoFormValue.value.className = val;
  systemCodes.value = [];
  if (!isOnlyClass) {
    baseInfoFormRef.value?.resetFields(["systemCode", "categoryId", "typeId", "modelId", "eqpId", "eqpName"]);
  }
  emits("clearEquip");
};
// 系统组件调用父组件
const changeSystemCodes = (val, val2) => {
  baseInfoFormValue.value.systemCode = val;
  systemCodes.value = val2;
  baseInfoFormRef.value.resetFields(["typeId", "categoryId", "modelId"]);
  emits("clearEquip");
};
// 系统组件调用父组件
const changeAllSystemCodes = (val, val2, val3, val4) => {
  baseInfoFormValue.value.className = val2;
  baseInfoFormValue.value.systemCode = val3;
  systemCodes.value = val4;
  baseInfoFormRef.value.resetFields(["typeId", "categoryId", "modelId"]);
  emits("clearEquip");
};
// 系统组件值改变触发
const clearSystem = val => {
  systemCodes.value = [];
  baseInfoFormRef.value.resetFields(["systemCode", "typeId", "categoryId", "modelId"]);
  emits("clearEquip");
};
// 用于编辑时的页面回显，保证类型型号过滤是正确的
const getEditSystemCodes = (val, val2) => {
  baseInfoFormValue.value.systemCode = val;
  systemCodes.value = val2;
};
// 改变设备总称，清空设备类型和设备型号
const changeCategory = val => {
  baseInfoFormValue.value.categoryId = val;
  baseInfoFormRef.value.resetFields(["typeId", "modelId"]);
  emits("clearEquip");
};
// 改变设备类型，清空设备型号
const changeType = (val, val2) => {
  baseInfoFormValue.value.categoryId = val2;
  baseInfoFormValue.value.typeId = val;
  baseInfoFormRef.value.resetFields(["modelId"]);
  emits("clearEquip");
};
// 获取巡检区域
const focusPositionCodes = async () => {
  const data = await getTableData({});
  positionCodesList.value = data || [];
};
const changeCheckArea = () => {
  emits("clearEquip");
};
</script>
